<template>
  <div id="my_header">
    <div class="logo"></div>
    <div class="user_opt">
      <input
        @input="search_project"
        type="text"
        class="search_inp"
        placeholder="Search project"
        v-model="search_key"
      />
      <div class="dropdown_box">
        <el-dropdown>
          <span class="el-dropdown-link">
            <i class="el-icon-files"></i>
            &nbsp;{{project_type}}
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-plus" @click.native="go_my_pro">我的项目</el-dropdown-item>
            <el-dropdown-item icon="el-icon-circle-plus" @click.native="go_team_pro">所有项目</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <router-link tag="div" to="/home/workbench">
        <i class="el-icon-takeaway-box"></i>
        &nbsp;工作台
      </router-link>
      <router-link tag="div" to="/demo">
        <i class="el-icon-video-camera-solid"></i>
        &nbsp;演示厅
      </router-link>
      <div class="profile">
        <el-avatar :size="40" :src="avatar_url" @click.native="go_user_info"></el-avatar>
        <div class="user_box">
          <el-dropdown>
            <span class="el-dropdown-link">
              {{nickname}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-edit" @click.native="go_user_info">编辑资料</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-close" @click.native="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "my_header",
  data() {
    return {
      avatar_url: "/default_img.jpg",
      search_key: "",
      project_type: "我的项目",
      nickname: ""
    };
  },
  methods: {
    search_project() {
      this.$store.commit('projects/set_s_val',this.search_key)
    },
    go_my_pro() {
      this.project_type = "我的项目";
      this.$store.commit('projects/set_mine_t')
      this.$router.push("/home/projects");
    },
    go_team_pro() {
      this.project_type = "所有项目";
      this.$store.commit('projects/set_mine_f')
      this.$router.push("/home/projects");
    },
    go_user_info() {
      this.$router.push("/home/user_info");
    },
    logout() {
      localStorage.clear()
      this.$router.push("/account/login");
    }
  },
  created() {
    this.nickname = this.$store.state.account.user_info.nickname;
    this.$store.state.account.user_info.img_url
      ? (this.avatar_url = this.$store.state.account.user_info.img_url)
      : null;
  }
};
</script>

<style lang='scss'>
#my_header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 80px;
  background-color: #495060;
  > .logo {
    box-sizing: border-box;
    padding: 10px;
    flex: 1;
    height: 80px;
    background-image: url(../assets/logo.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-clip: content-box;
    background-origin: content-box;
  }
  > .user_opt {
    flex: 2;
    box-sizing: border-box;
    width: 1000px;
    height: 80px;
    padding: 20px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    > .search_inp {
      color: white;
      border: none;
      height: 100%;
      border-radius: 8px;
      background: hsla(0, 0%, 100%, 0.125);
      outline: none;
      text-indent: 14px;
      &::placeholder {
        color: rgb(206, 206, 206);
      }
    }
    > div {
      cursor: pointer;
      color: rgb(200, 200, 200);
      transition: all 0.4s;
      &:hover {
        color: white;
      }
    }
    > .dropdown_box {
      > .el-dropdown {
        display: inline-block;
        position: relative;
        color: rgb(200, 200, 200);
        font-size: 16px;
        transition: all 0.4s;
        &:hover {
          color: white;
        }
      }
    }
    > .profile {
      display: flex;
      align-items: center;
      > .user_box {
        margin-left: 10px;
        color: white;
        > .el-dropdown {
          display: inline-block;
          position: relative;
          color: rgb(200, 200, 200);
          font-size: 16px;
          transition: all 0.4s;
          &:hover {
            color: white;
          }
        }
      }
    }
  }
}
</style>